<template>
    <div>
      <el-dialog :title="dialogTitle" :visible="dialogVisible" width="50%" :before-close="handleClose">
        <el-card shadow="never" style="height: 80px;">
            <el-form :inline="true">
                <el-form-item label="分类名称:" style="width: 180px;">
                    <el-input v-model="IMG.paramFrom.name" placeholder="请输入内容" size="mini" style="width: 80px;"></el-input>
                </el-form-item>
                <el-form-item label="文件名称:" style="width: 180px;">
                    <el-input v-model="IMG.paramFrom.fileName" placeholder="请输入内容"  size="mini" style="width: 80px;"></el-input>

                </el-form-item>
                <el-form-item label="文件类型:" style="width: 160px;">
                  <el-select v-model="IMG.paramFrom.type" placeholder="请选择" size="mini" style="width: 60px;">
                    <el-option key="" label="全部" value=""></el-option>
                    <el-option
                      v-for="item in IMG.options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                
            </el-form>
        </el-card>

      <el-card shadow="never" style="margin-top: 5px;">
      <el-table border :data="IMG.tableData" style="width: 100%">

        <el-table-column prop="name" align="center" label="name" width="80px" />
        <el-table-column prop="type" align="center" label="type" width="60px" />
        <el-table-column prop="fileName" align="center" label="fileName" width="150px" />
        <el-table-column prop="" align="center" label="图标" width="60px">
          <template v-slot="{ row }">
            <img :src= "imgBaseUrl + row.id" width="30px"/>
          </template>
        </el-table-column>
        
        <el-table-column prop="" align="center" label="状态" width="80px">
          <template v-slot="{ row }">
            <span v-if = "row.isActive" style = "color:green">启用</span>
            <span v-if = "!row.isActive" style = "color:red">禁用</span>
          </template>
        </el-table-column>
        <el-table-column prop="" align="center" label="操作" width="100px" >
        <template v-slot="{ row }">
            <el-button type="danger" size="mini" @click="data.selectImg(row.id)" style="margin: 3px;">选择</el-button>
            
          </template>
        </el-table-column>
      </el-table>
      
      <paging :page-size="IMG.query.pageSize" 
        :total="IMG.total" 
        :currentPage="IMG.currentPage"
        @size-change="IMG.fn.handleSizeChange"
        @current-change="IMG.fn.handleCurrentChange" />
     
    </el-card>
  </el-dialog>
    </div>
</template>
<script>
import imgAdd from './imgAdd.vue'
import paging from '@/components/paging.vue'
import {  
  IMGApi,
} from "./imgIndex.js";
import baseData from '@/baseData'
import Cookies from 'js-cookie'
import { TOKEN_KEY } from "@/constants/KEY";
import axios from 'axios'
export default {
    name: 'img',
    components: {
      paging,
      imgAdd,
    },
    props: {
      dialogVisible: {
      default: false,
      type: Boolean
    },
    dialogTitle:'',
      data:null,
    },
    data() {
      return {
       imgBaseUrl:baseData.basePathUser+'/tbFile/fileById?id=',
      IMG:{
        dialogTitle:'新增1',
        dialogVisible: false,
        form:{},
        action:baseData.basePathAdmin+"/tbFile/add",
        paramFrom:{
          fileName:'',
          name:'',
          type:'',
        },
        tableData:[],
        options: [
            {
                lable:'svg',
                value:'svg'
            },
            {
                lable:'png',
                value:'png'
            }
        ],
        query:{
          pageSize:5,
          page:1
        },
        currentPage:1,
        total:0,
        fn:{}, 
       },
  
        header: {
          Authentication: Cookies.get(TOKEN_KEY),
          'Content-Type': 'multipart/form-data',
        },
      }
    },
  
    mounted() {
      window.common = this
      this.IMG.fn =this.IMGfn()
      this.IMG.fn.init()
      this.IMG.fn.getInfo()
    },
    watch:{
      'IMG.paramFrom': {
        handler(newValue, oldValue) {
          this.IMG.fn.query()
          //console.log('User changed:', newValue);
        },
        // 是否在选项声明时立即触发
        immediate: false,
        // 是否深度监听
        deep: true
      },
      
    },
    methods: {
      handleClose() {
      this.$emit('update:dialogVisible', false)
    },
      handleClick(tab, event) {
        //console.log(tab, event);
      },
      
      IMGfn(){
        const that = this;
        let that_data = that.IMG
        const that_api = IMGApi()
        const fn = {
          init(){
            that_data = that.IMG
          },
          async active(id,isActive){
            const res = await that_api.active({id,isActive})
            that.$message({
                    type: 'info',
                    message: res
                  })
            that_data.fn.getInfo();
          },
          async activeTypeSupplier(typeSupplierId,isActive){

            let info ;
            if(isActive){
              info = {
                msg:'启用时，会将此品种的其他数据源禁用，确定吗？',
                title:'启用',
              }
              
            }else{
              info = {
                msg:'禁用后，门户将无法看到此品种，确定吗？',
                title:'禁用',
              }
            }
            that.$confirm(info.msg, info.title, {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(async () => {
              const res = await that_api.activeTypeSupplier({typeSupplierId,isActive})
              that.$message({
                      type: 'info',
                      message: res
                    })
              that_data.fn.getInfo();
              
            }).catch(() => {
              that.$message({
                type: 'success',
                message: '已取消'+msg.title
              })
            })

            
          },
          
          handleSuccess(res){
            that.$message({
                type: 'success',
                message: res.msg
              })
            that_data.fn.query()
          },
         
          query(){
            that_data.query.page = 1
            that_data.currentPage = 1
            that_data.fn.getInfo();
          },
          async getInfo(){
            const data = await that_api.getPage({
              ...that_data.query,
              tbFile:that_data.paramFrom})
            that_data.tableData = data.records
            that_data.total = data.total
          },
          handleSizeChange(){
            
          },
          handleCurrentChange(val){
            that_data.currentPage = val
            that_data.query.page = val
            that_data.fn.getInfo()
          },
         
        }
        return fn
      },
      
    }
    
  }
</script>
<style scoped>

  .el-form-item :last-child {
width: 80px;
}
</style>